<template>
  <div class="bigBox">
    <div class="serchBox">
      <div class="header">
        <SerchHeader @search="search"></SerchHeader>
        <p @click="$router.push('/home')">取消</p>
      </div>
    </div>

    <div class="search" v-show="!is_search">
      <div class="hotserch" v-if="historyList.length">
        <van-icon name="delete" @click="delHandler"/>
        <p>最近搜索</p>
        <div class="titleBox">
          <p v-for="(item,index) in historyList" :key="index">{{item}}</p>
        </div>
      </div>
      <div class="hotserch">
        <p>热门搜索</p>
        <div class="titleBox hotbox">
          <p 
          v-for="(item,index) in hotList" 
          :key="index"
          @click="hotkeyHandler(item.keyword)"
          >{{item.keyword}}</p>
        </div>       
      </div>
    </div>

    <div class="listBox" v-show="keyword.length != 0">
      <p 
        class="item" 
        v-for="(item,index) in historyList" 
        :key="index"
      >{{item}}</p>
      <p class="nomore">没有更多了</p>
    </div>
  </div>
</template>

<script>
import SerchHeader from '@/components/Appheader.vue'
import { getHotSearchListApi, deletehisApi } from '@/request/serch/index'
export default {
  created(){
    getHotSearchListApi().then(res => {
      this.hotList = res.data.data.hotKeywordList
      this.historyList = res.data.data.historyKeywordList
    })
  },
  data () {
   return {
    hotList:[],
    historyList:[],
    is_search: false,
    keyword: ''
   }
  },
  components:{
    SerchHeader
  },
  methods:{
    hotkeyHandler(keyword){
      const list = JSON.parse(JSON.stringify(this.historyList))
      list.unshift(keyword)
      const arr = [...new Set(list)]

      this.historyList = arr
    },
    delHandler(){
      deletehisApi().then(res => {
        if(res.status == 200) {
          if(res.data.data == ''){
          
          this.historyList = []
          }
        }
      })
    },
    search(key){
      this.keyword = key.serchvalue
      this.is_search = key.isSearch
      this.hotkeyHandler(key.serchvalue)
      
      console.log(this.keyword, this.is_search)
    }
  }
}
</script>

<style scoped lang="scss">
.listBox{
  margin-bottom: 80px;
  >.item{
    padding: 10px 16px;
    font-size: 14px;
    color: #323233;
    margin: 0;
  }
  .nomore{
    font-size: 14px;
    color: #969799;
    text-align: center;
  }
}
.header{
  display: flex;
  justify-content: space-between;
  >p{
    font-size: 16px;
    width: 50px
  }
  .titleBox{
    display: flex;
    justify-content: space-between;
    .title{
    border: 1px solid #969799;
    display: flex;
   }
  } 
}
.hotserch{
  position: relative;
  padding: 10px;
  background-color: #fff;
  >p{
    font-size: 21px;
    color: #000;
    margin: 0;
    margin-bottom: 5px;
  }
}
.search{
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.3);
  height: 500px;
  
}
.hotbox{
  :nth-child(1){
    border: 1px solid red;
  }
}
.titleBox{
 
  display: flex;
  flex-wrap: wrap;
  >p{
    margin: 2px;
    border: 1px solid #969799;
    height: 22px;
    line-height: 22px;
    padding: 0 2px;
    font-size: 12px;
    color: #969799;
  }
}
  .van-search{
    width: 80% !important;
  }
  ::v-deep .van-icon{
    font-size: 20px;
    position: absolute;
    right: 5px;
    top: 15px;
  }
</style>
